<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add Event</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=37f039f77afe1828a092628eab6c68a3"></script>
    <script>
        function initMap() {
            var map = new AMap.Map('mapContainer', {
                zoom: 10,
                center: [104.0654, 30.6595] // 初始位置是成都市中心
            });

            map.on('click', function(e) {
                document.getElementById('latitude').value = e.lnglat.getLat();
                document.getElementById('longitude').value = e.lnglat.getLng();
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div class="container">
        <h1 class="mt-5">Add Event</h1>
        <form method="post">
            <div class="form-group">
                <label for="event_name">Event Name</label>
                <input type="text" class="form-control" id="event_name" name="event_name" required>
            </div>
            <div class="form-group">
                <label for="event_date">Event Date</label>
                <input type="date" class="form-control" id="event_date" name="event_date" required>
            </div>
            <div class="form-group">
                <label for="location">Location</label>
                <input type="text" class="form-control" id="location" name="location" required>
            </div>
            <div class="form-group">
                <label for="latitude">Latitude</label>
                <input type="text" class="form-control" id="latitude" name="latitude" required readonly>
            </div>
            <div class="form-group">
                <label for="longitude">Longitude</label>
                <input type="text" class="form-control" id="longitude" name="longitude" required readonly>
            </div>
            <div id="mapContainer" style="height: 400px;"></div>
            <div class="form-group">
                <label for="category_id">Category</label>
                <select class="form-control" id="category_id" name="category_id" required>
                    {% for category in categories %}
                        <option value="{{ category.id }}">{{ category.category_name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="ticket_type_id">Ticket Type</label>
                <select class="form-control" id="ticket_type_id" name="ticket_type_id" required>
                    {% for ticket_type in ticket_types %}
                        <option value="{{ ticket_type.id }}">{{ ticket_type.ticket_name }} ({{ ticket_type.ticket_price }})</option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Add Event</button>
        </form>
    </div>
</body>
</html>
